
 <template>
  <div id="test">
    <div class="chart-wrapper">
      <v-chart class="chart" :option="option" autoresize />
    </div>
    <div class="chart-wrapper">
      <v-chart class="chart" :option="option2" autoresize />
    </div>
  </div>
</template>
 
  
  <script>
  import { use } from "echarts/core";
  import { RadarChart } from "echarts/charts";
  import { TitleComponent, LegendComponent } from "echarts/components";
  import { CanvasRenderer } from "echarts/renderers";
  import VChart, { THEME_KEY } from "vue-echarts";
  // import { ref, defineComponent } from "@vue/composition-api";
  import { findByChartUser ,findByChartUserId} from "@/api/module/score";
  import { ref, defineComponent, watch } from "@vue/composition-api";

  use([TitleComponent, LegendComponent, RadarChart, CanvasRenderer]);
  
  export default defineComponent({

    props: {
    userId: {
      type: [String, Number],
      required: true
    }
  },
    components: {
      VChart,
    },
    provide: {
      [THEME_KEY]: "white",
    },
    setup(props) {

      const { userId } = props;
    // 你可以监听 userId 变化并调用接口


  const option = ref({
    title: {
      text: "学生实训成绩",
      left: 'center',  // 标题居中
    },
    legend: {
      data: ["学生得分"],
      top: 40,  // 防止标题挡住图例
    },
    radar: {
      indicator: [],
      radius: '60%', // 可选，让图更好看
    },
    series: [
      {
        name: "学生得分",
        type: "radar",
        data: [],
        label: {
          show: true,
          color: '#000',
          fontSize: 14,
        },
      },
    ],
  });
  const option2 = ref({
    title: {
      text: "学生实训成绩",
      left: 'center',  // 标题居中
    },
    legend: {
      data: ["步骤得分"],
      top: 40,  // 防止标题挡住图例
    },
    radar: {
      indicator: [],
      radius: '60%', // 可选，让图更好看
    },
    series: [
      {
        name: "步骤得分",
        type: "radar",
        data: [],
        label: {
          show: true,
          color: '#000',
          fontSize: 14,
        },
      },
    ],
  });



  const modulelist = ref([]);

  const steplist = ref([]);

  const getList = async (uid) => {
  try {
    const response = await findByChartUserId({ userId: uid });
    modulelist.value = response.data.moduleScores || [];
    steplist.value = response.data.stepScores || [];
    // 计算总得分
    const totalScoremax = modulelist.value.reduce((sum, item) => sum + (item.moduleTotal || 0), 0);
    const totalScore = modulelist.value.reduce((sum, item) => sum + (item.moduleScore || 0), 0);

    const steptotalScoremax = steplist.value.reduce((sum, item) => sum + (item.stepTotal || 0), 0);

    const steptotalScore = steplist.value.reduce((sum, item) => sum + (item.stepScore || 0), 0);
    // 更新图表标题
    option.value.title.text = `学生实训成绩（总分：${totalScoremax}分-个人得分:${totalScore}）`;

    option2.value.title.text = `学生步骤成绩（总分：${steptotalScoremax}分-个人得分:${steptotalScore}）`;
    // 更新 radar 的 indicator，把模块名和总分拼起来
    option.value.radar.indicator = modulelist.value.map(item => ({
      name: `${item.moduleName} (${item.moduleTotal}分)`,  // 名字拼接上总分
      max: item.moduleTotal,
    }));

    option2.value.radar.indicator = steplist.value.map(item => ({
      name: `${item.stepName} (${item.stepTotal}分)`,  // 名字拼接上总分
      max: item.stepTotal,
    }));

    // 更新学生得分
    option.value.series[0].data = [
      {
        value: modulelist.value.map(item => item.moduleScore),
        name: "学生得分",
      },
    ];


    option2.value.series[0].data = [
      {
        value: steplist.value.map(item => item.stepScore),
        name: "步骤得分",
      },
    ];

  } catch (error) {
    console.error("加载数据失败", error);
  }
};

 // getList();
  watch(() => props.userId, async (newUserId) => {
      if (newUserId) {
        await getList(newUserId);
      }
    }, { immediate: true });
  return {
    option,
    option2
  };
},
  });
  </script>
  
  <style lang="less" scoped>
#test {
  width: 100%;
  height: 100vh; /* 注意加上高度 */
  display: flex;
  flex-direction: row; /* 横着排列 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.chart-wrapper {
  width: 45%; /* 每个图表宽度 45%，中间留点空隙 */
  height: 80%; /* 图表高度自己调一下，别太大 */
  margin: 0 10px; /* 左右留点间距 */
}
  </style>
  